<template>
	<view>
		<!-- 详情页内容 -->
		<view v-if='!pdfShow'>
			<view class="pageContent" v-show="!vanLoading">
				<view class="title">
					<span style='font-weight: bold;font-size: 18px;line-height: 25px;'>
						{{contentData.title}}
					</span>
				</view>
				<view class="peopleTime flexBetween">
					<view class="peopleLeft flexAlignCenter">
						<span style='display: inline-block;border: 1px solid #e4e4e4;
					padding: 2px 3px;font-size: 11px;color: #666;border-radius: 3px;'>{{contentData.columnName}}</span>

					</view>
					<view class="timeRight flexAlignCenter">
						<image src="../../static/peopleDetail.png" mode=""></image>
						<view style="margin-right: 7px;margin-left: 6px;">
							{{contentData.author}}
						</view>
						<view class="">
							{{contentData.releaseDate}}

						</view>
					</view>
				</view>
				<view class="contentWord">
					<view class="richText" v-html="contentData.content">
						{{contentData.content}}
					</view>
				</view>
				<view class="enclosure" v-for="(item,index) in contentData.fileVOList" :key='index'>

					<image src="../../static/fujian@2x.png" mode="" style='height: 14px;margin-bottom: 1px;margin-right: 2px;vertical-align: middle;'
					 v-if='item.fileType=="3"'></image>
					<text @click='onPdfView(item.url)' v-if='item.fileType=="3"' style='font-size: 14px;'>{{item.name}}</text>
				</view>

				<view class="bonusPoints" v-if="transitionShow">
					<view class="studySuccess">
						<image src="../../static/studySuccess.png" mode=""></image>
						<view class="integralView">
							<view style="margin-bottom: 40px;">+ {{integral}} 积分</view>
							<view>
								<view class="keepLearning" @click="keepLearning">继续学习</view>
							</view>
						</view>
					</view>


				</view>

			</view>
			<view class="loadingStyle flexCenterCenter" v-show="vanLoading">
				<!-- <LoadingStatus :status="vanLoading"></LoadingStatus> -->
				<!-- <van-loading size="24px" vertical>加载中...</van-loading> -->
				<view class="">
					<van-loading type="spinner" />
				</view>
				<view class="" style="color: #333; margin-left: 15px;">
					加载中...
				</view>
			</view>
		</view>

		<!-- 显示pdf -->
		<view v-else>
			<view class="loadingStyle flexCenterCenter" v-if='vanLoading'>
				<van-loading type="spinner" />
			</view>
			<view v-else>
				<web-view :src="src" v-if="iOSshow"></web-view>
			</view>
		</view>

	</view>
</template>

<script>
	import LoadingStatus from './content/load.vue'
	import {
		appGet
	} from "../../api/home/index.js"
	import {
		addPoints
	} from "../../api/detail/index.js"
	import uniTransition from '../../uni_modules/uni-transition/components/uni-transition/uni-transition.vue'
	import Dialog from '@/wxcomponents/vant-weapp/dialog/dialog';
	// import WordTem from './content/word.vue'
	export default {
		data() {
			return {
				contentWordData: '',
				enclosureData: '方案.pdf',
				vanLoading: true,
				url: '',
				transitionShow: false,
				viewingTime: 0,
				rewardConditions: '',
				contentId: '',
				timer: '',
				timerOut: '',
				goBottom: false,
				//是否弹出加分
				isShow: false,
				readFlag: false,
				// 是否阅读超过6篇
				readRestFlag: false,
				// vanLoading: true,
				iOSshow: false,
				pdfShow: false,
				contentData: {},
				// 积分
				integral: 5
			}
		},
		components: {
			LoadingStatus,
			uniTransition
		},
		//实时获取到滚动的值
		// onPageScroll: function(Object) {
		// 	console.log(Object.scrollTop); 
		// },


		//监听页面滑到底部
		onReachBottom() {
			this.goBottom = true
		},
		onLoad(option) {
			let _this = this
			wx.enableAlertBeforeUnload({
				message: `再看一会儿就可以获得积分哦\n确认退出吗！`,
				success: function(res) {

				},
				fail: function(errMsg) {
					// console.log("方法注册失败：", errMsg);
				},
			});

			this.contentId = option.id
			this.readFlag = JSON.parse(option.read)
			this.readRestFlag = JSON.parse(option.readRest)

			uni.hideHomeButton()
			this.viewingTime = 0
			this.timer = setInterval(() => {
				this.viewingTime++
			}, 1000)
			//获取内容
			appGet({
				contentId: option.id,
				orgId: uni.getStorageSync('spaceData').orgId
			}).then(res => {

				this.rewardConditions = res.data.data.rewardConditions
				this.integral = res.data.data.integral
				this.contentData = res.data.data


				this.contentData.content = this.contentData.content.replace(/<h1[^>]*>|<\/h1[^>]*>/gm, '')

				// this.contentData.content = this.contentData.content.replace(/<h1>/g, '')
				// this.contentData.content=this.contentData.content.replace(/<\/h1>/g, '')
				// console.log(this.contentData.content);
				this.vanLoading = false



			})

		},
		//监听返回
		onBackPress(e) {
			console.log("监听返回按钮事件", e);
			
			return false;
		},

		//监听停留时间
		watch: {
			viewingTime(val, oldval) {
				if (val < 4) {
					//没滚动条的时候
					let windowHeight = wx.getSystemInfoSync().windowHeight
					let query = wx.createSelectorQuery();
					query.select('.pageContent').boundingClientRect()
					query.exec((res) => {
						let listHeight = res[0].height; // 获取list高度

						if (listHeight < windowHeight) {
							this.goBottom = true
							// console.log(this.goBottom);
						}
					})
				}
				this.viewingTime = val

				if (this.readFlag != true && this.readRestFlag != true) {

					// console.log(this.viewingTime > this.rewardConditions);
					// console.log(this.goBottom == true);
					if (this.viewingTime > this.rewardConditions && this.goBottom == true) {


						addPoints({
							contentId: this.contentId,
							"idNo": uni.getStorageSync('realName').idNo,
							"orgId": uni.getStorageSync('spaceData').orgId,
							"personId": uni.getStorageSync('spaceData').personId,
							"projectId": uni.getStorageSync('spaceData').projectId
						}).then(res => {
							this.transitionShow = true
							wx.disableAlertBeforeUnload({})
						})
						// this.isShow=true
						// console.log(this.transitionShow);
						clearInterval(this.timer)

					}else{
						if (this.viewingTime > this.rewardConditions && this.goBottom != true){
							wx.enableAlertBeforeUnload({
								message: `看完全部内容才能获得积分哦\n确认退出吗！`,
								success: function(res) {
							
								},
								fail: function(errMsg) {
									// console.log("方法注册失败：", errMsg);
								},
							});
						}
					}
				}

			}
		},
		methods: {

			//触发动画
			transitionChange() {
				console.log('触发动画')
			},
			//打开pdf
			onPdfView(url) {
				this.vanLoading = true
				if (url.indexOf('https://fbzh-elearning.oss-cn-hangzhou.aliyuncs.com') != -1) {
					url = url.replace('https://fbzh-elearning.oss-cn-hangzhou.aliyuncs.com',
						'https://elearning-oss.zhinengjianshe.com');
				} else if (url.indexOf('https://lw-sit.oss-cn-beijing.aliyuncs.com') != -1) {

					url = url.replace('https://lw-sit.oss-cn-beijing.aliyuncs.com', 'https://it-wage-oss.zhinengjianshe.com');
				}
				// console.log(url.indexOf('https://lw-sit.oss-cn-beijing.aliyuncs.com'));
				const src = `${url}`;
				// 判断操作系统
				uni.getSystemInfo({
					success: (res) => {
						if (res.platform == "ios") {
							// iOS 可直接查看
							// console.log('苹果');
							// console.log(url);
							// this.url = src;
							this.vanLoading = false
							// this.iOSshow = false;

							uni.navigateTo({
								url: `../pdfView/pdfView?src=${url}`
							})
						} else {
							// Android 需要下载后、打开
							this.iOSshow = false;
							console.log(src);
							uni.downloadFile({
								url: src,
								success: (res) => {
									const path = res.tempFilePath;
									uni.openDocument({
										filePath: path,
										fileType: 'pdf',
										success: (res) => {
											console.log("打开成功！");
											this.vanLoading = false
										},
										fail: (err) => {
											uni.showToast({
												title: '打开文件失败',
												icon: 'none',
												duration: 2000
											});
											this.vanLoading = false
										}
									});
								},
								fail: (err) => {
									console.log(err);
									// this.err = err
									uni.showToast({
										title: '下载文件失败',
										icon: 'none',
										duration: 2000
									});
									this.vanLoading = false
								}
							});
						}
					}
				});




			},

			keepLearning() {
				this.transitionShow = false
			}
		}
	}
</script>

<style scoped lang='scss'>
	.topTitleActive {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 99;

		background: #fff;

	}

	.timeRight {
		line-height: 21px;
	}

	.pageContent {
		padding: 15px;
		padding-bottom: 40px;
		color: #333;

	}

	.enclosure {
		color: #1890FF;
		margin-bottom: 5px;
	}

	.timeRight ::v-deep image {
		width: 12px;
		height: 12px;
	}

	.enclosure ::v-deep image {
		width: 12px;
		height: 14px;
	}

	/* 	// .richText ::v-deep image{
	// 	width: 300px;
	// 	height: 200px;
	// } */
	.peopleTime {
		font-size: 12px;
		color: #666666;
		margin-bottom: 20px;
	}

	.title {
		margin-bottom: 20px;
	}

	.contentWord {
		margin-bottom: 30px;
		font-size: 15px;
		line-height: 25px;
	}

	.loadingStyle {
		width: 100%;
		height: calc(100vh - 90px);

	}

	.studySuccess ::v-deep image {
		width: 338px;
		height: 480px;
	}

	.bonusPoints {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);

		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.studySuccess {
		width: 338px;
		height: 480px;

		/* opacity: 1; */
		font-size: 35px;
		color: #f00;
		z-index: 2;
		text-align: center;
		position: fixed;
		left: calc(50% - 169px);
		bottom: calc(50% - 180px);
		animation-name: example;
		animation-duration: 0.7s;
		/* position: relative; */
	}

	.integralView {
		width: 100%;
		text-align: center;
		position: absolute;
		top: 300px;

	}

	.keepLearning {
		width: 140px;
		height: 34px;
		border-radius: 17px;
		background: #E8473E;
		color: #fff;
		font-size: 18px;
		line-height: 34px;
		letter-spacing: 3px;
		margin: 0 auto;
	}



	@keyframes example {
		0% {
			left: calc(50% - 169px);
			bottom: 0px;
		}

		/* // 25%  { left:calc(50% - 169px); bottom: 20px;}
		50% {
			left: calc(50% - 169px);
			bottom: 100px;
		} */

		// 75%  { left:calc(50% - 169px); bottom: 100px;}
		100% {
			left: calc(50% - 169px);
			bottom: calc(50% - 180px);
		}
	}
</style>
